<template>
  <div class="history-area">
    <div class="operation-list">
      <a-tooltip>
        <template #title>
          撤销
        </template>
        <a-button shape="circle" @click="undoHistory" :disabled="undoIsDisabled">
          <template #icon><UndoOutlined /> </template>
        </a-button>
      </a-tooltip>&nbsp;&nbsp;
      <a-tooltip>
        <template #title>
          重做
        </template>
        <a-button shape="circle" @click="redoHistory" :disabled="redoIsDisabled">
          <template #icon><RedoOutlined /> </template>
        </a-button>
      </a-tooltip>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { RedoOutlined, UndoOutlined } from '@ant-design/icons-vue'
import useEditorStore from "@/store/editor.ts";

export default defineComponent({
  components: {
    RedoOutlined,
    UndoOutlined
  },
  setup () {
    const editorStore = useEditorStore()

    const undoIsDisabled = computed<boolean>(() => editorStore.checkUndoDisable())
    const redoIsDisabled = computed<boolean>(() => editorStore.checkRedoDisable())

    const undoHistory = () => {
      editorStore.undo()
    }
    const redoHistory = () => {
      editorStore.redo()
    }
    return {
      undoHistory,
      redoHistory,
      undoIsDisabled,
      redoIsDisabled
    }
  }
})
</script>

<style>
.history-area {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 500;
}
.operation-list {
  display: flex;
}
.history-area .bold {
  font-weight: bold;
}
</style>
